<!--
 * @Author: xuqinggang
 * @Date: 2022-02-12 08:55:19
 * @LastEditTime: 2022-02-15 17:29:16
 * @LastEditors: xuqinggang
 * @Description: 高德地图组件
 * @FilePath: \cms_audio_manage\src\components\MapContainer\MapContainer.vue
-->
<template>
     <div id="container" ref="mapContainer"></div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import CONFIG from './Config'
    export default {
        mounted(){
            //DOM初始化完成进行地图初始化
            this.initMap();
        },
        data(){
            return{
                map:null,
                labelsLayer:null //LabelsLayer 图层是承载 LabelMarker 的图层
            }
        },
        methods:{
            async initMap(){
              debugger;
                const AMap = await AMapLoader.load({
                    key: CONFIG.KEY,    // 申请好的Web端开发者Key，首次调用 load 时必填
                    version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins:['AMap.Scale','AMap.ToolBar','AMap.Geolocation'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                })
                console.log(AMap);
                const obj = {  //设置地图容器id
                    viewMode:"3D",    //是否为3D地图模式
                    zoom:19,           //初始化地图级别
                    center:[113,23], //初始化地图中心点位置
                }
                this.map = await new AMap.Map(this.$refs.mapContainer,obj);

                // .then((AMap)=>{
                //     const obj = {  //设置地图容器id
                //         viewMode:"3D",    //是否为3D地图模式
                //         zoom:19,           //初始化地图级别
                //         center:[113,23], //初始化地图中心点位置
                //     }

                //     console.log(obj,65656);

                //     this.map = new AMap.Map(this.$refs.mapContainer,obj);

                    // this.map.on('click', function(e){
                    //     console.log(e);
                    // })

                    // console.log(this.map.plugin);

                    // console.log();
                    // this.map.on('click',e => console.log(e))

                    // AMap.plugin(['AMap.Scale','AMap.ToolBar','AMap.Geolocation'],() => {
                    //     const Scale = new AMap.Scale()
                    //     const ToolBar = new AMap.ToolBar()
                    //     const Geolocation = new AMap.Geolocation({
                    //          // 是否使用高精度定位，默认：true
                    //         enableHighAccuracy: true,
                    //         // 设置定位超时时间，默认：无穷大
                    //         timeout: 10000,
                    //         // 定位按钮的停靠位置的偏移量
                    //         offset: [20, 100],
                    //         //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    //         zoomToAccuracy: true,
                    //         //  定位按钮的排放位置,  RB表示右下
                    //         position: 'RB'
                    //     })
                    //     this.map.addControl(Scale)
                    //     this.map.addControl(ToolBar)
                    //     this.map.addControl(Geolocation)
                    // })

                    // this.addLabelMarker(AMap)
                // }).catch(e=>{
                //     console.error(e);
                // })
            },
           /**
            * @description 添加地图标注
            * @param {Class} AMap 高德地图API实例
            */
            addLabelMarker(AMap){
                var icon = {
                    // 图标类型，现阶段只支持 image 类型
                    type: 'image',
                    // 图片 url
                    // image: img,
                    // 图片尺寸
                    size: [100, 100],
                    // 图片相对 position 的锚点，默认为 bottom-center
                    anchor: 'center',
                };
                var text = {
                    name:`9527`,
                    // 要展示的文字内容
                    content: '凡凡所在地',
                    // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                    direction: 'right',
                    // 在 direction 基础上的偏移量
                    offset: [-20, -5],
                    // 文字样式
                    style: {
                        // 字体大小
                        fontSize: 50,
                        // 字体颜色
                        fillColor: '#22886f',
                        // 描边颜色
                        // strokeColor: '#fff',
                        // 描边宽度
                        // strokeWidth: 2,
                    }
                };
                var labelMarker = new AMap.LabelMarker({
                    name: '标注2', // 此属性非绘制文字内容，仅最为标识使用
                    position: [113.305182,23.020096],
                    zIndex: 16,
                    // // 将第一步创建的 icon 对象传给 icon 属性
                    icon: icon,
                    // // 将第二步创建的 text 对象传给 text 属性
                    text: text,
                });
                labelMarker.on('click',e => console.log(e))
                var labelsLayer = new AMap.LabelsLayer({
                    zooms: [3, 20],
                    zIndex: 1000,
                    // 该层内标注是否避让
                    collision: true,
                    // 设置 allowCollision：true，可以让标注避让用户的标注
                    allowCollision: true,
                });
                labelsLayer.add(labelMarker);
                this.map.add(labelsLayer)
            },
        },
    }
</script>

<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 100%;
    }
</style>
